<template>
  <div class="searchBlogById">
    <div
      class="title"
      :class="{
        dark: themeRef.state.themeState == 'drak',
        light: themeRef.state.themeState == 'light',
      }"
    >
      <div class="bg">
        <img :src="topicInfo.headerImage" alt="" />
      </div>
      <div class="message">
        <div class="header"><img :src="topicInfo.headerImage" alt="" /></div>
        <div class="mess">
          <div class="top">{{ topicInfo.title }}</div>
          <div class="bottom">
            阅读量:{{ topicInfo.seeNumber }} 讨论数:{{
              topicInfo.topicNumber - 1
            }}
          </div>
        </div>
        <div class="opt">
          <div class="btn">关注此话题</div>
        </div>
      </div>
      <div class="lead">{{ topicInfo.content }}</div>
    </div>
    <div
      class="upload"
      :class="{
        dark: themeRef.state.themeState == 'drak',
        light: themeRef.state.themeState == 'light',
      }"
    >
      <InputComm :option="InputCommOption"></InputComm>
    </div>
    <template v-if="loadingRef">
      <div
        style="
          box-sizing: border-box;
          border-radius: 5px;
          overflow: hidden;
          padding: 10px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin-bottom: 10px;
        "
        :class="{
          dark: themeRef.state.themeState == 'drak',
          light: themeRef.state.themeState == 'light',
        }"
        v-for="item in 6"
        :key="item"
      >
        <el-skeleton
          animated
          style="--el-skeleton-circle-size: 60px; width: 12%"
        >
          <template #template>
            <el-skeleton-item variant="circle" />
          </template>
        </el-skeleton>
        <el-skeleton
          :rows="3"
          animated
          style="--el-skeleton-circle-size: 100px; width: 90%"
        />
      </div>
    </template>
    <template v-else>
      <template v-if="topicBlogInfo.length == 0">
        <el-empty :image-size="200" description="多多发表您的看法吧！"
      /></template>
      <template v-else>
        <div class="mt" v-for="item in topicBlogInfo" :key="item.blogId">
          <BlogItem :renderData="item" /></div
      ></template>
    </template>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import "@/utils/type";
import Axios from "@/utils/Axios";
import BlogItem from "@/components/BlogItemComp/BlogItem.vue";
import InputComm from "@/components/InputCommComp/InputComm.vue";
import { emoji as emojiData } from "@/data/emoji";
@Options({
  components: { BlogItem, InputComm },
  mounted() {
    this.topicId = this.$route.params.id;
    Axios.get("/topic/queryTopicById", { params: { Id: this.topicId } }).then(
      (res: any) => {
        const { data } = res;
        this.topicInfo = data.data;
      }
    );
    Axios.get("/topic/getTopicBlogHot", {
      params: { getPage: 1, getNumber: 5, topicId: this.topicId },
    }).then((res: any) => {
      const { data } = res;
      this.topicBlogInfo = [...this.topicBlogInfo, ...data.data];
      this.loadingRef = false;
    });
  },
})
export default class searchBlogById extends Vue {
  InputCommOption: object = {
    type: "topic",
    emoji: true,
    image: true,
    video: true,
    permissions: true,
    buttonText: "发表",
    placeholder: "请发表您的看法~~~~",
  };
  loadingRef: boolean = true;
  // 主题
  themeRef: any = useStore();
  // 当前话题ID
  topicId: string = "";
  // 渲染当前话题信息
  topicInfo: object = {};
  // 渲染话题附属博文
  topicBlogInfo: Array<object> = [];
  // 发表博文是否可以转发
  isRef = true;
  // 博文是否可以评论
  isComm = true;
  // 评论内容
  textarea = "";
}
</script>

<style lang="less" scoped>
@import url("../../../../assets/less/global.less");
@import url("./index.less");
</style>